<template>
  <view class="page">
    <!-- #ifdef MP-WEIXIN-->
    <view class="head"><text @click="addAction()">添加</text></view>
    <!-- #endif -->
    <!-- #ifndef MP-WEIXIN-->
    <my-navbar
      leftText="子账号管理"
      @leftClick="back"
      @rightClick="addAction()"
      rightText="添加"
      rightColor="#40AE36"
    ></my-navbar>
    <!-- #endif -->
    <view class="content">
      <view class="list" v-for="item in dataList">
        <view class="name flex-btw fonts_26">
          <text>账号名称：{{ item.nickname }}</text>
          <image
            @click="addAction(item.id)"
            class="icon"
            src="@/static/image/edit.png"
            mode=""
          ></image>
        </view>
        <view class="phone fonts_26">手机号：{{ item.mobile }}</view>
        <view class="fonts_26"
          >收货地址：{{ item.address.address_name
          }}{{ item.address.detail }}</view
        >
      </view>
    </view>
  </view>
</template>

<script>
import { $https } from "@/static/js/request.js";
export default {
  data() {
    return {
      dataList: [],
    };
  },
  onShow() {
    this.getData();
  },
  methods: {
    getData() {
      $https("GET", "ziAccountList", {}, (res) => {
        if (res.data.errcode == 0) {
          this.dataList = res.data.data.list;
        } else {
          uni.showToast({
            icon: none,
            title: res.data.errmsg,
          });
        }
      });
    },
    addAction(id) {
      if (id) {
        uni.navigateTo({
          url: `/subpack/user/child/child_edit?id=${id}`,
        });
      } else {
        uni.navigateTo({
          url: `/subpack/user/child/child_edit`,
        });
      }
    },
    back() {
      // #ifdef H5
      window.history.back(-1);
      // #endif
      // #ifndef H5
      uni.navigateBack();
      // #endif
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  .head {
    height: 88rpx;
    width: 100%;
    padding: 0 30rpx;
    color: $dgreen;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .content {
    .list {
      padding: 20rpx 0rpx;
      margin: 20rpx 30rpx 0;
      font-size: 32rpx;
      color: #191919;
      border-bottom: 1px solid #ececec;
      .name {
        .icon {
          width: 32rpx;
          height: 32rpx;
        }
      }
      .phone {
        margin: 20rpx 0;
      }
    }
  }
}
</style>
